<template>
    <div class="stepOne">
        <h1></h1>
        <div class="form-box">
            <h2>请输入企业基础信息</h2>
            <p class="companyName">
                <van-field v-model="form.companyName" placeholder="请输入企业名称（必填）" />
            </p>
            <p class="nsrsbh">
                <van-field v-model="form.nsrsbh" placeholder="请输入企业税号"/>
            </p>
            <p class="next-btn">
                <van-button size="large" @click="nextStep">下一步</van-button>
            </p>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
export default {
    data() {
        //验证纳税人识别号
        let checkNsrsbh = (rule, value, callback) => {
            const reg = /^[A-Z0-9]{15}$|^[A-Z0-9]{16}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{19}$|^[A-Z0-9]{20}$/;
            if (!reg.test(value)) {
             callback(new Error("请输入有效的税号"))
            } else {
             callback()
            }
        }
        return {
            form: {
                companyName: '',
                nsrsbh: ''
            }
        }
    },
    created() {
        this.accessRecord('100002')
        if(this.$storage.get('taxDiscount')) {
            this.form.companyName = this.$storage.get('taxDiscount').companyName
            this.form.nsrsbh = this.$storage.get('taxDiscount').nsrsbh
        }
    },
    methods: {
       nextStep() {
           if(!this.form.companyName) {
               Toast('请输入企业名称')
               return
           }
           if(this.form.nsrsbh) {
               const reg = /^[A-Z0-9]{15}$|^[A-Z0-9]{16}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{19}$|^[A-Z0-9]{20}$/
               if (!reg.test(this.form.nsrsbh)) {
                   Toast('请输入有效的税号')
                   return
               }
           }
           if(this.$storage.get('taxDiscount')) {
               this.$storage.add('taxDiscount','companyName',this.form.companyName)
               this.$storage.add('taxDiscount','nsrsbh',this.form.nsrsbh)
           }else {
               this.$storage.set('taxDiscount',{companyName:this.form.companyName,nsrsbh: this.form.nsrsbh})
           }
           this.$router.direction = 'left'
           this.goToParams('stepTwo',{companyName:this.form.companyName,nsrsbh: this.form.nsrsbh})
       }

    }
}
</script>

<style lang="less" scoped>
.stepOne {
    min-height: 100%;
    background: linear-gradient(#8358f0,#5c33ff);
    padding: 120px 0 100px;
    h1 {
        width: 600px;
        height: 95px;
        background: url('../assets/imgs/app/home_title.png');
        background-size: 600px 95px;
        margin: 0 auto;
    }
    .form-box {
        width: 580px;
        background: url('../assets/imgs/app/home_bg.png') no-repeat center 0;
        background-size: 575px 638px;
        padding-top: 580px;
        margin: 30px auto 0;
        h2 { 
            width: 330px;
            font-size: 30px;
            color: #fff;
            margin: 0 auto 35px;
            text-align: center;
            position: relative;
            &::before,&::after {
                content: '';
                position: absolute;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                border: 2px solid #fff;
                top: 50%;
                transform: translateY(-50%);
            }
            &::before {
                left: 0;
            }
            &::after {
                right: 0;
            }
        }
        .next-btn {
            margin-top: 50px;
        }
    }
}
</style>

<style lang="less">
.stepOne {
    .van-field {
        height: 80px;
        border-radius: 6px;
        font-size: 28px;
        padding: 10px 15px 10px 75px;
        .van-field__body {
            height: 100%;
        }
    }
    .companyName {
        .van-field {
            background: url('../assets/imgs/app/home_icon1.png') no-repeat 20px center;
            background-size: 35px 28px;
            background-color: #fff;
        }
    }
    .nsrsbh {
        margin-top: 30px;
        .van-field {
            background: url('../assets/imgs/app/home_icon2.png') no-repeat 20px center;
            background-size: 35px 28px;
            background-color: #fff;
        }
    }
    .van-button {
        height: 80px;
        background-color: #fcc24c;
        border: 0;
        color: #fff;
        border-radius: 6px;
        font-size: 30px;
        line-height: 80px;
        .van-button__text {
            width: 125px;
            display: inline-block;
            background: url('../assets/imgs/app/home_icon3.png') no-repeat right center;
            background-size: 24px 24px;
            text-align: left;
        }
    }
}
</style>



